<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <!-- <meta http-equiv="Access-Control-Allow-Origin"  /> -->

    <!-- 图表 -->
    <script type="text/javascript" src="js/echarts.js"></script>
    <script src="js/echarts.min.js"></script>

    <!-- bootstrap--外联样式 -->
    <link rel="stylesheet" href="style/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="style/bootstrap/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="style/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="style/bootstrap/bootstrap-responsive.css">
    <!-- 日历时间 -->
    <link rel="stylesheet" href="style/dateTime.css">
    <!-- 滚动样式 -->
    <link rel="stylesheet" href="style/scroll.css">
    <!-- 主样式 -->
    <link rel="stylesheet" href="style/main.css">
    <title>茂名公安智慧警务数据平台</title>
    
</head>
<body>
    <div class="container" style="padding:0 40px;">
        <!-- 头部 -->
        <div class="row row-top">
            <div class="col-sm-3 ">
                <div class="date-left ">
                    <div class="btn-and ">
                        <li><button class="btn">其他警情</button></li>
                        <li><button class="btn">导入数据</button></li>
                        <li><button class="btn">导出数据</button></li>
                    </div>
                    <div class="date-calendar">
                        <div class="mycontainer">
                            <input type="text" placeholder="请选择日期" id="date">
                       </div>
                       <div class="date-check">
                            <div class="check-btn">
                                <div class="btn-default">
                                    <input type="submit" value="查询" class="btn">
                                </div>
                            </div>
                       </div>
                    </div>
                </div>
                <div class="login">
                    <div class="lg-lg">
                        <img src="image/login.png" alt="登录" class="img-login">
                        <h2 class="no-login">未登录</h2>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="center-top">
                    <div class="MIB-container">
                        <img src="image/MIB.png" alt="图片" class="MIB">
                    </div>
                    <h1 class="MIB-right">茂南公安智慧警务数据平台</h1>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="btn-right">
                    <div class="btn-dd">
                        <li><button>首页</button></li>
                        <li><button>警情汇总</button></li>
                        <li><button>警情分析</button></li>
                        <li><button>突出警情分析</button></li>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/dateTime.min.js"></script>
        <script type="text/javascript">
            $("#date").datetime({
            type:"date",
            value:[2019,9,31],
            success:function(res){
                console.log(res)
            }
        })
        </script>

        <!-- 中间数据展示 -->
        <div class="row row-center">
            <div class="col-sm-3 ">
                 <!-- 茂南区基本数据 -->
                <div class="data-base">
                    <div class="data-title">
                        <div class="dt"><h2>茂南区基本数据</h2></div>
                    </div>
                    <div class="data-show">
                        <div class="dt-show">
                            <div class="left">
                                <div class="left-data">
                                    <p>民警数量 <span>506人</span></p>
                                    <p>万人拥有民警数 <span>5.09名</span></p>
                                    <p>人均管辖面积 <span>0.16km²</span></p>
                                    <p>万人违法犯罪警情 <span>一件</span></p>
                                </div>
                                
                            </div>
                            <div class="right">
                                <div class="right-data">
                                    <p>区域面积 <span>625km²</span></p>
                                    <p>户籍人口 <span>99.35万人</span></p>
                                    <p>人口密度 <span>1589.6人/km²</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 警情性质top10 -->
                <div class="top-10">
                    <div class="data-title">
                        <div class="dt"><h2>警情性质top10</h2></div>
                    </div>
                    <!-- 扇形数据展示 -->
                    <div id="data-chart">

                    </div>
                </div>
                <!-- 绘制扇形图 -->
                <script type="text/javascript">
                    setTimeout(function () {
                    var myChart = echarts.init(document.getElementById('data-chart'));
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: [
                        {
                            orient: 'horizontal',
                            x: '5%',
                            y:'80%' ,
                            align:'left',
                            data:['不开收费凭证'],
                            textStyle:{
                                fontWeight:'normal',
                                color:'white'
                            }
                        },{
                            orient: 'horizontal',
                            x: '30%',
                            y:'80%' ,
                            data:['一般交通事故'],
                            textStyle:{
                                fontWeight:'normal',
                                color:'white'
                            }
                        },{
                            orient: 'horizontal',
                            x: '55%',
                            y:'80%' ,
                            data:['三无船舶擅自出海作业'],
                            textStyle:{
                                fontWeight:'normal',
                                color:'white'
                            }
                        },{
                            orient: 'horizontal',
                            x: '5%',
                            y:'88%' ,
                            data:['122警情'],
                            textStyle:{
                                fontWeight:'normal',
                                color:'white'
                            }
                        },{
                            orient: 'horizontal',
                            x: '25%',
                            y:'88%' ,
                            data:['不处理案件'],
                            textStyle:{
                                fontWeight:'normal',
                                color:'white'
                            }
                        },{
                            orient: 'horizontal',
                            x: '47%',
                            y:'88%' ,
                            data:['三防'],
                            textStyle:{
                                fontWeight:'normal',
                                color:'white'
                            }
                        },{
                            orient: 'horizontal',
                            x: '60%',
                            y:'88%' ,
                            data:['不按规定登记住宿信息'],
                            textStyle:{
                                fontWeight:'normal',
                                color:'white'
                            }
                        }],
                        series: [
                            {
                                name:'访问来源',
                                type:'pie',
                                radius: ['20%', '68%'],
                                center:['50%','40%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'inside',
                                        formatter:`{d}` + '%'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data:[
                                    {value:20, name:'不开收费凭证'},
                                    {value:25, name:'一般交通事故'},
                                    {value:12, name:'三无船舶擅自出海作业'},
                                    {value:15, name:'122警情'},
                                    {value:18, name:'不处理案件'},
                                    {value:10, name:'三防'},
                                    {value:12, name:'不按规定登记住宿信息'}
                                ]
                            }
                        ]
                        };
                        myChart.setOption(option,true);
        
                    });
                </script>
            </div>
            <!-- 茂南地图数据显示 -->
            <div class="col-sm-6">
                <div id="main-data"></div>
                <!-- <script src="js/jquery-1.8.3.min.js"></script> -->
                <script src="js/echarts.min.js"></script>
                <!-- <script src="js/echarts-all.js"></script> -->
                <script type="text/javascript">
                //  var myChart = echarts.init(document.getElementById('data-chart'));
                    var myChart = echarts.init(document.getElementById('main-data'));
                </script>
            </div>
            <div class="col-sm-3">
                <!-- 预警信息 -->
                <div class="warning">
                    <div class="data-title">
                        <div class="dt"><h2>预警信息</h2></div>
                    </div>
                    <div class="data-show">
                        <div class="dt-show">
                            <div class="txtScroll-top">
                                <div class="hd"></div>
                                <div class="bd">
                                    <ul class="infoList">
                                        <li>
                                            <img src="image/warn.png" alt="警告" id="img">
                                            <span class="date">2019-05-10</span>
                                            <a href="" target="_blank" class="notice">最近盗窃案频发，请注意</a>
                                        </li>
                                        <li>
                                            <img src="image/warn.png" alt="警告" id="img">
                                            <span class="date">2019-06-10</span>
                                            <a href="" target="_blank" class="notice">最近盗窃案频发，请注意</a>
                                        </li>
                                        <li>
                                            <img src="image/warn.png" alt="警告" id="img">
                                            <span class="date">2019-07-10</span>
                                            <a href="" target="_blank" class="notice">最近盗窃案频发，请注意</a>
                                        </li>
                                        <li>
                                            <img src="image/warn.png" alt="警告" id="img">
                                            <span class="date">2019-08-10</span>
                                            <a href="" target="_blank" class="notice">最近盗窃案频发，请注意</a>
                                        </li>
                                        <li>
                                            <img src="image/warn.png" alt="警告" id="img">
                                            <span class="date">2019-08-09</span>
                                            <a href="" target="_blank" class="notice">最近盗窃案频发，请注意</a>
                                        </li>
                                        <li>
                                            <img src="image/warn.png" alt="警告" id="img">
                                            <span class="date">2019-09-09</span>
                                            <a href="" target="_blank" class="notice">最近盗窃案频发，请注意</a>
                                        </li>
                                        <li>
                                            <img src="image/warn.png" alt="警告" id="img">
                                            <span class="date">2019-10-09</span>
                                            <a href="" target="_blank" class="notice">最近盗窃案频发，请注意</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <script type="text/javascript" src="js/jquery1.42.min.js"></script>
                            <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
                            <script type="text/javascript">
                                jQuery(".txtScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"top",autoPlay:true,vis:5,easing:"swing",delayTime:1000});
                            </script>
                        </div>
                    </div>
                </div>
                <!-- 高发地区top5 -->
                <div class="top-5">
                    <div class="data-title">
                        <div class="dt"><h2>高发地区top5</h2></div>
                    </div>
                    <!-- 雷达图数据展示 -->
                    <div id="leida-data-chart">
    
                    </div>
                </div>
                <script type="text/javascript">
                    setTimeout(function () {
                        var myChart = echarts.init(document.getElementById('leida-data-chart'));
                        var option = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: [
                                {
                                orient: 'vertical',
                                x: '3%',
                                y: '3%',
                                data:['2019年09月数据'],
                                textStyle:{
                                    color:'white'

                                }
                            },{
                                orient: 'vertical',
                                x: '3%',
                                y: '10%',
                                data:['2019年08月数据'],
                                textStyle:{
                                    color:'white'

                                }
                            },{
                                orient: 'vertical',
                                x: '3%',
                                y: '17%',
                                data:['2019年07月数据'],
                                textStyle:{
                                    color:'white'

                                }
                            }
                            ],
                            color:[
                                '#295276',
                                '#35785F',
                                '#626F64'
                            ],
                            radar: [
                                {
                                    axisLine:{
                                        lineStyle:{
                                            color:'#194283'
                                        }
                                    },
                                    splitLine:{
                                        lineStyle:{
                                            width:'3',
                                            color:'#2360CB'
                                        }
                                    },
                                    splitArea:{
                                        show:true,
                                        areaStyle:{
                                            color:'none'
                                        }
                                    },
                                    name:{
                                        textStyle:{
                                            color:'white',
                                            fontSize:'14'
                                        }
                                    },
                                    indicator: [
                                        {text: '茂南河东派出所', max: 100},
                                        {text: '茂南河东派出所', max: 100},
                                        {text: '茂南官渡派出所', max: 100},
                                        {text: '茂南治安防控大队', max: 100},
                                        {text: '茂南城南派出所', max: 100}
                                    ],
                                    radius: 80,
                                    center: ['50%','60%'],
                                },
                            ],
                            series: [
                                {
                                    type: 'radar',
                                        tooltip: {
                                        trigger: 'item'
                                    },
                                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                                    data: [
                                        {
                                            value: [89.34,80.56,48.89,79.92,57.90],
                                            name: '2019年09月数据',
                                            tooltip:'2019年09月数据',
                                            // areaStyle:{
                                            //     normal:{
                                            //         color:'#2F587D'
                                            //     }
                                            // }
                                        },
                                        {
                                            value: [70.34,60.56,38.99,79.82,77.90],
                                            name: '2019年08月数据',
                                            tooltip:'2019年08月数据',
                                        },
                                        {
                                            value: [30.34,88.56,72.99,51.82,91.90],
                                            name: '2019年07月数据',
                                            tooltip:'2019年07月数据',
                                        }
                                    ],
                                    // label: {
                                    //     normal: {
                                    //         show: true,
                                    //         position: 'inside',
                                    //         formatter:`{d}` + '%'
                                    //     },
                                    // },
                                }
                            ]
                        }
                        myChart.setOption(option,true);
                        $(window).resize(function() {           //图表自适应
                            myChart.resize();
                        }); 
                    })
                </script>
            </div>
        </div>

        <!-- 底部折线图数据展示 -->
        <div class="row row-bottom">
            <div class="col-sm-12">
                <div class="top-10">
                    <div class="data-title">
                        <div class="dt"><h2>警情性质top10</h2></div>
                    </div>
                    <!-- 折线图 -->
                     <div id="chart">
                    

                    </div>
                </div>
            </div>
        </div>
        <!-- 动态折线图 -->
        <script type="text/javascript">
            setTimeout(function () {
                var myChart = echarts.init(document.getElementById('chart'));
                var option = {
                    xAxis: {
                        type: 'category',
                        data: ['不开收费凭证', '一般交通事故', '三无船舶擅自出海作业', '122警情', '不处理案件', '三防', '不按规定登记住宿信息'],
                        axisLabel:{           //横轴文字颜色
                            show:true,
                            textStyle:{
                                fontSize:14,
                                color:'#7991C8'
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                             axisLabel:{               //纵轴文字颜色
　　　　                        show:true,
　　　　                        textStyle:{
　　　　                            color: '#7991C8',
　　　　                        } 
　　                        }
                        }
                    ],
                    series: [
                    {
                        data: [0.70, 0.912, 0.881, 0.884, 0.88, 0.7830, 0.6820],
                        type: 'line',
                        itemStyle:{
                            normal:{
                                color:'white',
                                lineStyle:{
                                    color:'white'
                                }
                            }
                        }
                    },
                    {
                        type:'bar',
                        data: [0.80, 0.932, 0.901, 0.934, 0.90, 0.8330, 0.7320],
                        barWidth:30,
                        itemStyle:{
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#60DAE2'
                            }, {
                                offset: 1,
                                color: '#0382DE'
                            }]),
                        }
                            
                    }
        
                    }]
                };
                myChart.setOption(option,true);
            });
        </script>
  
    </div>
     <!-- bootstrap--js库 -->
     <!-- <script src="js/bootstrap.js"></script> -->
     <!-- <script src="js/bootstrap.min.js"></script> -->
</body>
</html>

<script type="text/javascript">
    //百度统计代码
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>